<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="UTF-8"
	src="../js/prefixfree.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/base.css"
	media="all" />
<link rel="stylesheet" type="text/css" href="../css/self.css"
	media="all" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="../viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.css" rel="stylesheet">
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/bootstrap.js"></script>
<link href="../css/alert.css" rel="stylesheet">
</head>
<body>
	<table class="table table-striped">
		<tr>
			<td class="active">类型ID</td>
			<td class="active">类型名称</td>
			<td class="active">操作</td>
		</tr>
		<c:forEach var="type" items="${types }">
			<tr>
				<td>${type.tid }</td>
				<td>${type.tname }</td>
				<td><button class="btn btn-default" onclick="del('${type.tid}')" type="submit">删除</button>
					<button class="btn btn-default" onclick="modify('${type.tid}','${type.tname}')" type="submit">修改</button></td>
			</tr>
		</c:forEach>
	</table>
	<ul class="statusbar">
		<nav aria-label="...">
			<ul class="pager">
				<li><a href="javascript:void(0)" onclick="page(-1)">上一页</a></li>&nbsp;&nbsp;
				<li><a href="javascript:void(0)" onclick="page(1)">下一页</a></li>
			</ul>
		</nav>
	</ul>


	<!-- 弹框部分代码 -->
	<div class="popOutBg"></div>
	<div class="popOut">
		<span title="关闭"> X </span>
		<table>
			<caption>请输入需要修改的内容</caption>
			<input id="modify_tid" type="hidden" value="">
			<tr>
				<td width="120">类型名称</td>
				<td><input id="modify_tname" type="text" class="inp" value="" /></td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" id="modify_sub"
					class="change_submit" value="提 交" /></td>
			</tr>
		</table>
	</div>
	
	<script>
		//上/下一页的点击事件
		function page(p){
			var href = location.href;
			var hash = location.hash;
			var page = hash.split("page=")[1];
			var newPage = parseInt(page) + parseInt(p);
			if(newPage < 1){
				newPage = 1;
			}
			console.log(page);
			console.log(newPage);
			$.post("../../admin_type",{
				op:'getTypeByPage',
				page:newPage
			},function(data){
				console.log(data);
				if(data>0){
					var url = "types.jsp#type=0&page="+data;
					top.$("#frame").attr("src",url);
					location.reload();
				}
				console.log(url);
			});
		}
		//显示修改对话框
		function show(param){
			if(arguments[1] == true){
				return document.querySelectorAll(param);
			}else{
				return document.querySelector(param);
			}
		}
		
		//修改的点击事件	对话框的显示隐藏
		function modify(tid,tname){
			$("#modify_tid").val(tid);
			document.getElementById('modify_tname').value=tname;
			show(".popOut").style.display = "block";
			ani();
			show(".popOutBg").style.display = "block";
			function ani(){
				show(".popOut").className = "popOut ani";
			}
			$(".popOut > span").click(function(){
				show(".popOut").style.display = "none";
				show(".popOutBg").style.display = "none";
			});
		}
		//修改的提交事件
		$("#modify_sub").click(function(){
			var tid = $("#modify_tid").val();
			var tname = $("#modify_tname").val();
			if( tname==null || tname=="" ){
				alert("信息不可为空");
				return;
			}
			$.post("../../admin_type",{
				op:'type_modify',
				tid:tid,
				tname:tname
			},function(data){
				if(data>0){
					alert("修改成功!重新加载");
					var hash = location.hash;
					var page = hash.split("page=")[1];
					$.post("../../admin_type",{
						op:'getTypeByPage',
						page:page
					},function(data){
						console.log(data);
						if(data>0){
							location.reload();
						}else{
							alert("暂无数据");
						}
					},"json");
				}else{
					alert("修改失败!");
				}
			});
		});
		//删除事件
		function del(tid){
			var r = confirm("删除该类型,将删除该类型的所有商品！是否继续？");
			if (r == false) {
				return;
			}
			$.post("../../admin_type",{
				op:'type_del',
				tid:tid
			},function(data){
				if(data>0){
					alert("删除成功!重新加载");
					var hash = location.hash;
					var page = hash.split("page=")[1];
					$.post("../../admin_type",{
						op:'getTypeByPage',
						page:page
					},function(data){
						console.log(data);
						if(data>0){
							location.reload();
						}else{
							alert("暂无数据");
						}
					},"json");
				}else{
					alert("删除失败!");
				}
			});
		}
	</script>
</body>